@class-prefix-swiper: ~'uabm-swiper';

.@{class-prefix-swiper} {
  --height: auto;
  --width: 100%;
  --border-radius: 0;
  --track-padding: 0;
  --slide-size: 100%;
  --track-offset: 0%;

  position: relative;
  display: block;
  width: var(--width);
  height: var(--height);
  border-radius: var(--border-radius);
  z-index: 0;
  overflow: hidden;

  &-track {
    width: 100%;
    height: 100%;
    white-space: nowrap;
    padding: var(--track-padding);
    &-allow-touch-move {
      cursor: grab;
    }
    &-inner {
      position: relative;
      display: flex;
      flex-wrap: nowrap;
      width: 100%;
      height: 100%;
      overflow: visible;
    }
  }

  &-slide {
    flex: none;
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    white-space: unset;
  }

  &-item {
    display: block;
    width: 100%;
    height: 100%;
    white-space: normal;
  }

  &-horizontal {
    &-track-allow-touch-move {
      // 启用单指垂直平移手势。
      touch-action: pan-y;
    }

    .@{class-prefix-swiper}-indicator {
      position: absolute;
      bottom: 6px;
      left: 50%;
      transform: translateX(-50%);
    }

    .@{class-prefix-swiper}-track {
      transform: translateX(var(--track-offset));
      &-inner {
        flex-direction: row;
        width: var(--slide-size);
      }
    }
  }
}
